<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <div id="main">
        <div class="header">
            <div class="header-left">
                <img src="img/logo.png">
            </div>
            <div class="header-right">
                <div class="header-user" @click="logout">
                    {{isLogin?userinfo.name+' 退出':'请登录'}}
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="sidebar">
                <div class="sidebar-item" :class="{'sidebar-item_active': which==0}" @click="openPannel(0)">
                    <div class="sidebar-title">所有文章</div>
                </div>
                <div class="sidebar-item" :class="{'sidebar-item_active': which==1}" @click="openPannel(1)">
                    <div class="sidebar-title">所有分类</div>
                </div>
                <div class="sidebar-item" :class="{'sidebar-item_active': which==2}" @click="openPannel(2)">
                    <div class="sidebar-title">所有用户</div>
                </div>
            </div>
            <div class="content">
                <qilian-article v-show="which==0" :listid="list_id"></qilian-article>
                <qilian-list v-show="which==1" @list-click="getListId" :flushsignal="flush_signal"></qilian-list>
                <qilian-user v-show="which==2"></qilian-user>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/wangEditor.min.js"></script>
    <script type="text/javascript" src="js/ChinesePY.js"></script>
    <script type="text/javascript" src="js/qs.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/public.js"></script>
    <script type="text/javascript" src="js/index-user.js"></script>
    <script type="text/javascript" src="js/index-list.js"></script>
    <script type="text/javascript" src="js/index-article.js"></script>
    <script type="text/javascript">
    const app = new Vue({
        el: '#main',
        components: {
            'qilian-user': qilian_user,
            'qilian-list': qilian_list,
            'qilian-article': qilian_article
        },
        data: {
            comps: [
                'qilian-article',
                'qilian-list',
                'qilian-user',
                'qilian-article-item',
                'qilian-list-item',
            ],
            which: 1,
            isLogin: false,
            userinfo: {},
            list_id: 0,
            flush_signal: 0
        },
        created: function() {
            this.$options.methods.checkLogin(this);
        },
        methods: {
            openPannel: function(which) {
                this.which = which;
                this.list_id = 0;
                if(which == 1) {
                    this.flush_signal ++;
                }
            },
            getListId: function(list_id) {
                this.list_id = list_id;
                this.which = 0;
            },
            checkLogin: function(that) {
                axios.get(that.$host + 'isLogin.php')
                    .then(function(response) {
                        if (parseInt(response.data.code) != 0) {
                            window.location.href = "login.html";
                        } else {
                            const userinfo = {
                                id: response.data.data.id,
                                name: response.data.data.name,
                                email: response.data.data.email,
                                power: response.data.data.power
                            };
                            that.userinfo = userinfo;
                            localStorage.setItem('userinfo', JSON.stringify(userinfo));
                            that.isLogin = true;
                        }
                    })
                    .catch(function(err) {
                        console.log(err)
                    });
            },
            logout: function() {
                if (this.isLogin) {
                    if (confirm('是否要退出登录')) {
                        axios.get(this.$host + 'logout.php')
                            .then(response => {
                                if (response.data.code == 0) {
                                    localStorage.removeItem('userinfo');
                                    window.location.href = 'login.html';
                                }
                            })
                            .catch(err => {
                                console.log(err);
                            });
                    }
                } else {
                    window.location.href = "login.html";
                }
            }
        }
    });
    </script>
</body>

</html>